<!--
 * @Author: wangming
 * @Date: 2020-09-09 14:04:55
 * @LastEditors: wangming
 * @LastEditTime: 2021-12-10 16:09:57
 * @Description:添加类别按钮
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="780px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>查询条件</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <div class="table-list pr20 pl20">
      <div class="add-button">
        <el-button
          size="medium"
          type="text"
          icon="el-icon-circle-plus-outline"
          @click="addCondition"
        >
          添加字段
        </el-button>
      </div>
      <div class="list">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="字段编码" width="220">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.fieldCode"
                filterable
                allow-create
                @change="fieldCodeChange($event, scope.$index)"
              >
                <el-option
                  v-for="item in fieldCodeList"
                  :key="item.code"
                  :label="item.name + '[' + item.code + ']'"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字段名称" width="220">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fieldName"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="渲染组件" width="220">
            <template slot-scope="scope">
              <el-select v-model="scope.row.renderCom" placeholder="请选择">
                <el-option
                  v-for="item in CompKey"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep } from "lodash";

const CompKey = [
  { label: "单行文本搜索框", value: "SearchInput" },
  { label: "数值搜索框", value: "SearchNumberInput" },
  { label: "下拉搜索", value: "SearchSelect" },
  { label: "日期搜索", value: "SearchDatePicker" },
  { label: "时间搜索", value: "SearchTimePicker" },
  { label: "人员搜索", value: "SearchStaffSelect" },
  { label: "部门搜索", value: "SearchDepartmentSelect" },
  { label: "下拉树形选择搜索", value: "SearchTreeSelect" },
  { label: "级联选择", value: "SearchCascader" },
];
const defaultRenderCom = {
  // 自动带出字段对应控件
  SHORT_TEXT: "SearchInput", // 短文本
  LONG_TEXT: "SearchInput", // 长文本
  NUMBER: "SearchNumberInput", // 数值
  DATE: "SearchDatePicker", // 日期
  TIME: "SearchTimePicker", // 时间
  STAFF: "SearchStaffSelect", // 人员
  DEPARTMENT: "SearchDepartmentSelect", // 部门
  RELATION_SELECT: "SearchSelect", // 字典
  RELATION_REFERENCE: "SearchSelect",
  SEQ: "SearchInput",
  INTEGER: "SearchNumberInput",
  BOOL: "SearchInput",
};
export default {
  computed: {
    fieldCodeList() {
      return this.myEntitymodelList.filter(
        (item) =>
          this.children.every((ele) => ele.__config.id !== item.id) &&
          this.tableData.every((ele) => ele.fieldCode !== item.code)
      );
    },
  },
  data() {
    return {
      loading: false,
      showVisible: false,
      callback: () => {},
      myEntitymodelList: [],
      children: [],

      tableData: [], // {fieldCode: '', fieldName: '', renderCom: ''}
      CompKey,
      defaultRenderCom,
    };
  },

  methods: {
    addCondition() {
      this.tableData.push({
        fieldCode: "",
        fieldName: "",
        renderCom: "",
      });
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    fieldCodeChange(event, index) {
      const selectedField = this.myEntitymodelList.filter(
        (item) => item.code === event
      )[0];
      this.tableData[index].renderCom = selectedField
        ? this.defaultRenderCom[selectedField["type"]]
        : "SearchInput";
      this.tableData[index].fieldName = selectedField
        ? selectedField["name"]
        : event;
    },
    addForm(data) {
      return this.showModel(data);
    },
    showModel({ myEntitymodelList, children }) {
      this.showVisible = true;
      this.loading = false;
      this.myEntitymodelList = myEntitymodelList;
      this.children = children;
      this.tableData = [];
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
    async submit() {
      try {
        this.loading = true;
        this.showVisible = false;
        this.callback(cloneDeep(this.tableData));
        // return;
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped></style>
